<script lang="ts" setup name="Dialog">
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'

const slots = useSlots()

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Dialog'),
  fullscreen: propTypes.bool.def(true),
  width: propTypes.oneOfType([String, Number]).def('40%'),
  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
})

const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'maxHeight', 'appendToBody']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})

const isFullscreen = ref(false)

const toggleFull = () => {
  isFullscreen.value = !unref(isFullscreen)
}

const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)

watch(
  () => isFullscreen.value,
  async (val: boolean) => {
    await nextTick()
    if (val) {
      const windowHeight = document.documentElement.offsetHeight
      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
    } else {
      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
    }
  },
  {
    immediate: true
  }
)

const dialogStyle = computed(() => {
  return {
    height: unref(dialogHeight)
  }
})
</script>

<template>
  <ElDialog v-bind="getBindValue" :close-on-click-modal="true" :fullscreen="isFullscreen" :width="width" destroy-on-close lock-scroll draggable class="com-dialog" :show-close="false">
    <template #header="{ close }">
      <div class="relative h-32px flex items-center justify-between">
        <slot name="title">
          {{ title }}
        </slot>
        <div class="absolute right-0px top-[50%] h-32px flex translate-y-[-50%] items-center justify-between">
          <SvgIcon v-if="fullscreen" class="is-hover mr-20px cursor-pointer" :icon="isFullscreen ? 'ri:fullscreen-exit-line' : 'ri:fullscreen-line'" color="var(--el-color-info)" @click="toggleFull" />
          <SvgIcon class="is-hover cursor-pointer" icon="ep:close" color="var(--el-color-info)" @click="close" />
        </div>
      </div>
    </template>

    <ElScrollbar v-if="scroll" :style="dialogStyle">
      <slot />
    </ElScrollbar>
    <slot v-else />
    <template v-if="slots.footer" #footer>
      <slot name="footer" />
    </template>
  </ElDialog>
</template>

<style lang="scss">
.com-dialog {
  --el-dialog-padding-primary: 20px 25px;

  .#{$elNamespace}-overlay-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &.#{$elNamespace}-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 auto !important;
    transform: translate(-50%, -50%);

    .#{$elNamespace}-dialog__header {
      padding: 0;
      margin-right: 0 !important;
      font-size: 16px;
      border-bottom: none;

      .el-icon {
        &:hover {
          color: var(--el-color-primary) !important;
        }
      }
    }

    .#{$elNamespace}-dialog__body {
      display: flex;
      flex-direction: column;
      padding: 0 !important;
      border: none;
    }

    .#{$elNamespace}-dialog__footer {
      border-top: none;
    }
  }
}
</style>
